{% extends "bash.html" %}
{% load static %}
{% block content %}

    <table class="table table-bordered table-striped text-center bg-info" id="show_number">
    <thead>
    <tr class="info">
        {% for t in listtab %}

            <th class="text-center">{{ t }}</th>>

        {% endfor %}
    </tr>
    </thead>
    <tbody>
        {% for in_show_value in list1 %}
            <tr>
                <td id="{{ in_show_value.0 }}_1">{{ in_show_value.0 }}</td>
                <td id="{{ in_show_value.0 }}_2">{{ in_show_value.1 }}</td>
                <td id="{{ in_show_value.0 }}_3">{{ in_show_value.2 }}</td>
                <td id="{{ in_show_value.0 }}_4">{{ in_show_value.3 }}</td>
                <td id="{{ in_show_value.0 }}_5">{{ in_show_value.4 }}</td>
                <td id="{{ in_show_value.0 }}_6">{{ in_show_value.5 }}</td>
                <td>
                    <a href="#" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#edit" data-whatever="{{ in_show_value.0 }}" >编辑</a>
                </td>
            </tr>
        {% endfor %}
    </tbody>
    </table>

     <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel1">编辑</h4>
                            </div>
                            <div class="modal-body">
                               <div>
                                    <div>
                                        <label><span>资产编号</span></label>
                                        <input type="text" placeholder="**必填" id="edit_number" readonly="readonly"/>
                                    </div>
                                    <div>
                                        <label><span>资产名称</span></label>
                                        <input type="text" placeholder="电脑 or 手机 or 家具 or 其他" id="edit_name"/>
                                    </div>
                                    <div>
                                        <label><span>具体位置</span></label>
                                        <input type="text" placeholder="**必填" id="edit_seat_number"/>
                                    </div>
                                    <div>
                                        <label><span>使用姓名</span></label>
                                        <input type="text" placeholder="选填" id="edit_asset_users"/>
                                    </div>
                                   <div>
                                        <label><span>M&nbsp;&nbsp;&nbsp;A&nbsp;&nbsp;&nbsp;C</span></label>
                                        <input type="text" placeholder="MAC格式：xx:xx:xx:xx" id="edit_mac"/>
                                    </div>
                                    <div>
                                        <label><span>所属公司</span></label>
                                        <input type="text" id="edit_remarks"/>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" onclick="editUser()">保存</button>
                            </div>
                        </div>
                    </div>
                </div>

{% endblock %}
{% block script %}


    $('#edit').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var recipient = button.data('whatever');// Extract info from data-* attributes
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this);
    modal.find('.modal-title').text('编辑：' + recipient);
    modal.find('.modal-body input').val("")
    /* 资产编号 edit_number
    *  资产名称 edit_name
    *  资产型号 edit_category
    *  数    量 edit_num
    *  资产分类 edit_table
    *  具体位置 edit_seat_number
    *  使 用 者 edit_asset_users
    *  所属公司 edit_remarks
    */
    // 添加初始化数据框
    document.getElementById("edit_number").value = document.getElementById(""+recipient+"_1").innerText;
    document.getElementById("edit_name").value = document.getElementById(""+recipient+"_2").innerText;
    document.getElementById("edit_seat_number").value = document.getElementById(""+recipient+"_3").innerText;
    document.getElementById("edit_asset_users").value = document.getElementById(""+recipient+"_4").innerText;
    document.getElementById("edit_mac").value = document.getElementById(""+recipient+"_5").innerText;
    document.getElementById("edit_remarks").value = document.getElementById(""+recipient+"_6").innerText;
    });


    function editUser(){
    /*
        *  资产编号 edit_number
        *  资产名称 edit_name
        *  具体位置 edit_seat_number
        *  使用姓名 edit_asset_users
        *  所属公司 edit_remarks
        *  MAC     edit_mac
    */

    var number = document.getElementById("edit_number").value;
    var name = document.getElementById("edit_name").value;
    var seat_number = document.getElementById("edit_seat_number").value;
    var asset_users = document.getElementById("edit_asset_users").value;
    var remarks = document.getElementById("edit_remarks").value;
    var mac = document.getElementById("edit_mac").value;

    $.post("{% url 'computerstatus:editipassets' %}",{'number':number,'name':name,'seat_number':seat_number,'asset_users':asset_users,'remarks':remarks,'mac':mac},function(data,status){
        if (data.code == '200'){
            document.getElementById(""+number+"_1").innerText = number;
            document.getElementById(""+number+"_2").innerText = name;
            document.getElementById(""+number+"_3").innerText = seat_number;
            document.getElementById(""+number+"_4").innerText.innerText = asset_users;
            document.getElementById(""+number+"_5").innerText = mac;
            document.getElementById(""+number+"_6").innerText = remarks;
    }
        alert(data.msg)
    })


    }


{% endblock script %}